<template>
    <div class="isStore-container">
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>物资管理</el-breadcrumb-item>
            <el-breadcrumb-item>物资入库</el-breadcrumb-item>
        </el-breadcrumb>
        <!--   主体部分   -->
        <el-card>
            <!-- 搜索区域 -->
            <el-form
                :model="queryMap"
                ref="form"
                label-width="80px"
                :inline="true"
                size="small"
                class="demo-form-inline"
            >
                <el-form-item label="类型">
                    <el-select clearable v-model="queryMap.type" placeholder="请选择入库类型">
                        <el-option label="捐赠" value="1"></el-option>
                        <el-option label="下拨" value="2"></el-option>
                        <el-option label="采购" value="3"></el-option>
                        <el-option label="借用" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单号">
                    <el-input
                        clearable
                        @clear="search"
                        v-model="queryMap.inNum"
                        placeholder="请输入入库单查询"
                        @keyup.enter.native="search"
                        class="input-with-select"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="queryMap.status" placeholder="请选择状态">
                        <el-option label="已入库" :value="0"></el-option>
                        <el-option label="回收站" :value="1"></el-option>
                        <el-option label="待审核" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker
                        clearable
                        v-model="range"
                        type="datetimerange"
                        :value-format="'yyyy-MM-dd HH:mm:ss'"
                        :picker-options="pickerOptions"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item style="margin-left: 40px">
                    <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-refresh" type="warning" @click="resetQuery">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <router-link to="/addStocks">
                        <el-button type="success" icon="el-icon-plus">入库</el-button>
                    </router-link>
                </el-form-item>
                <el-form-item>
                    <el-button type="button" icon="el-icon-download" @click="downExcel">导出</el-button>
                </el-form-item>
            </el-form>

            <!--     表格区域       -->
            <el-table size="mini" v-loading="loading" :data="tableData" border style="width: 100%" height="420">
                <el-table-column label="#" prop="id" width="50"></el-table-column>
                <el-table-column
                    prop="inNum"
                    :show-overflow-tooltip="true"
                    label="入库单号"
                    width="180"
                ></el-table-column>
                <el-table-column prop="type" label="物资类型" width="80">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.type == 1">捐赠</el-tag>
                        <el-tag v-else-if="scope.row.type == 2">下拨</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.type == 3">采购</el-tag>
                        <el-tag type="warning" v-else>借用</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="productNumber" label="数量" sortable width="60"></el-table-column>
                <el-table-column prop="phone" label="联系方式" width="120"></el-table-column>
                <el-table-column prop="status" label="状态" width="100" center>
                    <template slot-scope="scope">
                        <el-tag size="mini" effect="plain" type="danger" v-if="scope.row.status == 1">回收</el-tag>
                        <el-tag size="mini" effect="plain" v-if="scope.row.status == 0">已入库</el-tag>
                        <el-tag size="mini" effect="plain" type="warning" v-if="scope.row.status == 2">审核中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="operator" label="操作员" width="110"></el-table-column>
                <el-table-column prop="supplierName" label="物资提供方" width="100"></el-table-column>
                <el-table-column
                    :show-overflow-tooltip="true"
                    prop="createTime"
                    label="入库时间"
                    sortable
                    width="120"
                ></el-table-column>
                <el-table-column label="操作" width="300" fixed="right">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-view" @click="detail(scope.row.id)" type="primary" size="mini"
                            >明细
                        </el-button>
                        <!-- 气泡确认框 -->
                        <!-- 1 -->
                        <span v-if="scope.row.status == 0">
                            <el-popconfirm
                                style="margin-left: 10px"
                                @confirm="remove(scope.row.id)"
                                confirm-button-text="好的"
                                cancel-button-text="不用了"
                                icon="el-icon-info"
                                icon-color="red"
                                title="这是一段内容确定移入回收站吗？"
                            >
                                <el-button slot="reference" type="info" size="mini" icon="el-icon-delete"
                                    >回收站</el-button
                                >
                            </el-popconfirm>
                        </span>
                        <!-- 2 -->
                        <span v-else-if="scope.row.status == 1">
                            <el-popconfirm
                                @confirm="back(scope.row.id)"
                                style="margin-left: 10px"
                                confirmButtonText="好的"
                                cancelButtonText="不用了"
                                icon="el-icon-info"
                                iconColor="green"
                                title="这是一段内容确定恢复数据吗？"
                            >
                                <el-button type="warning" slot="reference" size="mini" icon="el-icon-s-operation"
                                    >还原</el-button
                                >
                            </el-popconfirm>
                            <el-popconfirm
                                style="margin-left: 10px"
                                @confirm="del(scope.row.id)"
                                title="这是一段内容确定删除吗？"
                            >
                                <el-button type="danger" slot="reference" size="small" icon="el-icon-delete"
                                    >删除</el-button
                                >
                            </el-popconfirm>
                        </span>
                        <!-- 3 -->
                        <span v-else-if="scope.row.status == 2">
                            <el-popconfirm
                                style="margin-left: 10px"
                                @confirm="publish(scope.row.id)"
                                title="审核通过后库存将更新,是否通过"
                            >
                                <el-button type="success" slot="reference" size="small" icon="el-icon-refresh"
                                    >通过</el-button
                                >
                            </el-popconfirm>
                            <el-popconfirm
                                style="margin-left: 10px"
                                @confirm="del(scope.row.id)"
                                title="这是一段内容确定删除吗？"
                            >
                                <el-button type="danger" slot="reference" size="small" icon="el-icon-delete"
                                    >删除</el-button
                                >
                            </el-popconfirm>
                        </span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination
                style="margin: 10px 0; float: right"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryMap.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryMap.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>

            <!--    明细对话框   -->
            <el-dialog title="入库明细" :visible.sync="dialogVisible" @close="closeDetail" width="60%">
                <!--  1.来源信息-->
                <el-card class="box-card" style="margin-bottom: 10px">
                    <div class="text item">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <span style="font-size: 11px; color: #303030">省区市:</span> &nbsp;<el-tag
                                        size="mini"
                                        >{{ supplier.address }}</el-tag
                                    >
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <span style="font-size: 11px; color: #303030">具体位置:</span> &nbsp;<el-tag
                                        size="mini"
                                        >{{ supplier.name }}</el-tag
                                    >
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <span style="font-size: 11px; color: #303030">联系人 :</span> &nbsp;<el-tag
                                        size="mini"
                                        >{{ supplier.contact }}</el-tag
                                    >
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content bg-purple">
                                    <span style="font-size: 11px; color: #303030">电话 : </span>&nbsp;<el-tag
                                        size="mini"
                                        >{{ supplier.phone }}</el-tag
                                    >
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <!-- 2.步骤条 -->
                <el-steps
                    :active="productStatus == 0 ? 3 : productStatus"
                    finish-status="success"
                    simple
                    style="margin: 10px"
                >
                    <el-step title="提交入库单"></el-step>
                    <el-step title="审核入库单"></el-step>
                    <el-step title="进入库存"></el-step>
                </el-steps>
                <!-- 3. 明细表格信息 -->
                <el-table
                    height="260"
                    max-height="350"
                    border
                    :data="detailTable"
                    style="width: 100%; margin-bottom: 20px"
                >
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="pnum" label="商品编号"></el-table-column>
                    <el-table-column prop="model" label="规格"></el-table-column>
                    <el-table-column prop="imageUrl" label="图片" align="center" width="150px" padding="0px">
                        <template slot-scope="scope">
                            <img :src="'服务器地址' + scope.row.imageUrl" alt style="width: 30px; height: 30px" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="数量"></el-table-column>
                    <el-table-column prop="unit" label="单位"></el-table-column>
                </el-table>
                <!-- 4. 明细分页 -->
                <el-pagination
                    style="margin: -10px 0; float: right;h"
                    background
                    @current-change="handleDetailSizeChange"
                    :current-page="this.pageNum"
                    :page-size="3"
                    layout="total,prev, pager, next"
                    :total="this.detailTotal"
                >
                </el-pagination>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "Instore",

    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天(此刻)",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const end = new Date(new Date(new Date().toLocaleDateString()).getTime());
                            const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {},
                    {
                        text: "最近两个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },

            loading: true,
            total: 0,
            detailTable: [{ name: "唐敏", pnum: "0484-184", model: "1个/包", imageUrl: "", count: "10", unit: "包" }], // 明细数据
            detailTotal: 0, // 明细总记录数
            pageNum: 1, //明细页数
            detailId: undefined, //明细一页的id
            range: [], //查询时间
            queryMap: { pageNum: 1, pageSize: 10, status: 0 }, //搜索数据
            tableData: [], //表单数据
            supplier: {
                address: "上海市",
                name: "虹桥机场",
                contact: "小明",
                phone: "13400000011",
            }, // 供应者数据
            dialogVisible: false, //明细对话框显示
            productStatus: 2, //步骤条进度
        };
    },

    created() {
        this.getTableData();
        setTimeout(() => {
            this.loading = false;
        }, 500);
    },

    methods: {
        // 获取物资数据
        async getTableData() {
            // 判断是否限定了时间区间
            if (this.range != null && this.range.length > 1) {
                this.queryMap.startTime = this.range[0];
                this.queryMap.endTime = this.range[1];
            } else {
                this.queryMap.startTime = null;
                this.queryMap.endTime = null;
            }
            const { data: res } = await this.$http.get("inStock/findInStockList", { params: this.queryMap });
            // console.log(res);
            if (res.code == 200) {
                this.tableData = res.data.rows;
                this.total = res.data.total;
            } else {
                return this.$message.error(res.msg);
            }
        },

        // 搜索
        search() {
            this.queryMap.pageNum = 1;
            this.getTableData();
        },

        // 重置搜素
        resetQuery() {
            this.queryMap = { pageNum: 1, pageSize: 10, status: 0 };
            this.queryMap.startTime = null;
            this.queryMap.endTime = null;
            this.range = [];
        },

        // 导出Excel
        downExcel() {
            this.$message.error("此功能未实现，后台没有开此接口");
        },

        // 明细
        async detail(id) {
            // 获取当前明细的id
            this.detailId = id;
            const { data: res } = await this.$http.get("inStock/detail/" + id, { params: { pageNum: this.pageNum } });
            // console.log(res);
            if (res.code == 200) {
                this.supplier = res.data.supplierVO;
                this.detailTable = res.data.itemVOS;
                this.detailTotal = res.data.total;
                this.productStatus = res.data.status;
                this.dialogVisible = true;
            } else {
                return this.$message.error(res.msg);
            }
        },

        // 放入回收站
        async remove(id) {
            const { data: res } = await this.$http.put("inStock/remove/" + id);
            if (res.code == 200) {
                this.getTableData();
                return this.$message.success("移入回收站成功");
            } else {
                return this.$message.error("移入回收站失败");
            }
        },

        // 还原
        async back(id) {
            const { data: res } = await this.$http.put("inStock/back/" + id);
            if (res.code == 200) {
                this.getTableData();
                return this.$message.success("从回收站中已恢复");
            } else {
                return this.$message.error("从回收站恢复失败");
            }
        },

        // 通过
        async publish(id) {
            console.log("________id", id);
            const { data: res } = await this.$http.put("inStock/publish/" + id);
            if (res.code == 200) {
                this.getTableData();
                return this.$message.success("入库已审核通过");
            } else {
                return this.$message.error("入库已审核失败");
            }
        },

        // 删除
        async del(id) {
            console.log("________id", id);
            const { data: res } = await this.$http.put("inStock/del/" + id);
            if (res.code == 200) {
                this.getTableData();
                return this.$message.success("删除入库单记录成功");
            } else {
                return this.$message.error("删除入库单记录失败");
            }
        },

        // 关闭明细对话框
        closeDetail() {
            this.pageNum = 1;
        },

        // 改变页码
        handleSizeChange(newSize) {
            this.queryMap.pageSize = newSize;
            this.getTableData();
        },
        // 点击分页
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            this.getTableData();
        },
        // 明细改变页码
        handleDetailSizeChange(newSize) {
            this.pageNum = newSize;
            this.detail(this.detailId);
        },
    },
};
</script>

<style lang="less" scoped></style>
